<template>
  <editor
    v-model="content"
    :id="id"
    :init="editorConfig"
  >
  </editor>
</template>


<script lang="ts" setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/media'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'

interface PropsConfig {
  value: string,
  id?: string
}

const props = withDefaults(defineProps<PropsConfig>(), {
  value: '',
  id: 'tinymce'
})

const emit = defineEmits(['update:value'])

const content = ref(props.value)

const editorConfig = {
  selector: '#' + props.id,
  language_url: '/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/tinymce/skins/ui/oxide',
  height: 400,
  branding: true,
  plugins: 'link lists image codesample code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste', // 插件
  toolbar: 'codesample image bold italic underline alignleft aligncenter alignright alignjustify | forecolor backcolor | fontselect | fontsizeselect | formatselect |  bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink media insertdatetime table  hr pagebreak | fullscreen preview | strikethrough', // 工具条
  font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=Microsoft Yahei; Impact=impact,chicago;', // 字体
  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', // 文字大小
  paste_data_images: true,
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'Java', value: 'java' },
    { text: 'C++', value: 'cpp' },
  ],
  // 图片上传回调
  images_upload_handler: (blobInfo: any, success: Function) => {
    const file = blobInfo.blob()
    console.log(file)
    // 拿到file文件后在这里进行你自己的上传接口，用过success(url)把图片地址插入到编辑器
  },
}

const setContent = (res: string) => {
  content.value = res
}

watch(() => props.value, (value: string) => {
  content.value = value
})

watch(() => content.value, (value: string) => {
  emit('update:value', value)
})

onMounted(() => {
  tinymce.init(editorConfig)
  content.value = props.value
})

defineExpose({
  setContent
})

</script>


<style scoped>
</style>